<template>
  <div class="box">
    <!-- 搜索 -->
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="">
        <el-input v-model="formInline.title" placeholder="请输入标题" />
      </el-form-item>
      <el-form-item label="">
        <el-input v-model="formInline.author" placeholder="请输入负责人" />
      </el-form-item>
      <el-form-item label="">
        <el-select v-model="formInline.status" placeholder="任务状态">
          <el-option label="未开始" value="未开始" />
          <el-option label="进行中" value="进行中" />
          <el-option label="已取消" value="已取消" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">搜索</el-button>
        <el-button type="primary" @click="onSubmits">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 新增 -->
    <el-button type="primary" plain @click="addlist">新增</el-button>
    <!-- 表格 -->
    <el-table :data="list.tableData" style="width: 100%">
      <el-table-column label="开始时间" width="200px">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <el-icon><timer /></el-icon>
            <span style="margin-left: 10px">{{ scope.row.createTime }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="任务标题">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span style="margin-left: 10px">{{ scope.row.title }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="任务人员">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span style="margin-left: 10px">{{ scope.row.author }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="任务状态">
        <template #default="scope">
          <el-tag>{{ scope.row.status }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="紧急程度">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span style="margin-left: 10px">{{ scope.row.type }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="完成程度">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span style="margin-left: 10px">{{ scope.row.ing }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="">
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
            >详情</el-button
          >
          <el-button size="small" @click="handleDel(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 弹框 -->
    <el-dialog v-model="dialogFormVisible" title="新增任务" width="500px">
      <el-form :model="form" label-width="">
        <el-form-item label="任务标题">
          <el-input v-model="form.title" placeholder="请输入任务标题" />
        </el-form-item>
        <el-form-item label="负责人员">
          <el-input v-model="form.author" placeholder="请输入负责人员" />
        </el-form-item>
        <el-form-item label="开始时间">
          <el-date-picker
            v-model="form.createTime"
            type="datetime"
            placeholder="选择开始时间"
            :default-time="defaultTime"
          />
        </el-form-item>
        <el-form-item label="紧要程度">
          <el-radio-group v-model="form.type">
            <el-radio label="重要" value="重要" />
            <el-radio label="紧急" value="紧急" />
            <el-radio label="普通" value="普通" />
            <el-radio label="重要且紧急" value="重要且紧急" />
          </el-radio-group>
        </el-form-item>
        <el-form-item label="任务状态">
          <el-select v-model="form.status" placeholder="选择任务状态">
            <el-option label="未开始" value="未开始" />
            <el-option label="进行中" value="进行中" />
            <el-option label="已取消" value="已取消" />
          </el-select>
        </el-form-item>
        <el-form-item label="完成程度">
          <el-select v-model="form.ing" placeholder="选择完成程度">
            <el-option label="0%" value="0%" />
            <el-option label="25%" value="25%" />
            <el-option label="50%" value="50%" />
            <el-option label="75%" value="75%" />
            <el-option label="100%" value="100%" />
          </el-select>
        </el-form-item>
        <el-form-item label="任务描述">
          <el-input v-model="form.desc" type="textarea" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="add"> 保存 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { reactive, onMounted, ref } from "vue";
import { Timer } from "@element-plus/icons-vue";
import { getlist, searchlist, addList, delList } from "../../../api/api";
import { ElMessage, ElMessageBox } from "element-plus";
import { useRouter } from "vue-router";

const router = useRouter();

interface User {
  id?: number;
  createTime: string;
  title: string;
  author: string;
  status: string;
  type: string;
  ing: string;
}

// 默认时间
const defaultTime = new Date(2000, 1, 1, 12, 0, 0);

// 判断弹框是否打开
const dialogFormVisible = ref(false);

// 默认宽度
const formLabelWidth = "140px";

// 待删除的id
let delid = ref(0);

// 表单
const form = reactive({
  title: "",
  author: "",
  status: "",
  createTime: "",
  desc: "",
  type: "",
  ing: "",
});

// 搜索的表单
const formInline = reactive({
  title: "",
  author: "",
  status: "",
});

// 数据
const list = reactive({
  tableData: [],
});

onMounted(() => {
  render();
});

// 渲染
const render = () => {
  getlist().then((res) => {
    if (res.data.code == 1) {
      list.tableData = res.data.data;
    }
  });
};

// 点击新增执行的函数
const addlist = () => {
  dialogFormVisible.value = true;
};

// 点击确定执行的函数
const add = () => {
  if (form.title == "") {
    alert("任务标题不能为空");
  } else if (form.author == "") {
    alert("负责人员不能为空");
  } else if (form.createTime == "") {
    alert("开始时间不能为空");
  } else {
    addList(form).then((res) => {
      if (res.data.code == 1) {
        render();
      }
    });
    dialogFormVisible.value = false;
  }
};

// 点击详情执行的函数
const handleEdit = (index: number, row: User) => {
  router.push(`/home/detail/${row.id}`);
};

// 点击删除执行的函数
const handleDel = (index: number, row: User) => {
  delid.value = row.id;
  ElMessageBox.confirm("确定删除这一项任务?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      delList(delid.value).then((res) => {
        if (res.data.code == 1) {
          ElMessage({
            type: "success",
            message: "删除成功",
          });
          render();
        }
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消删除",
      });
    });
};

// 点击搜索执行的函数
const onSubmit = () => {
  searchlist(formInline).then((res) => {
    list.tableData = res.data.data;
  });
};

// 点击重置执行的函数
const onSubmits = () => {
  render();
};

// 时间
const shortcuts = [
  {
    text: "Today",
    value: new Date(),
  },
  {
    text: "Yesterday",
    value: () => {
      const date = new Date();
      date.setTime(date.getTime() - 3600 * 1000 * 24);
      return date;
    },
  },
  {
    text: "A week ago",
    value: () => {
      const date = new Date();
      date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
      return date;
    },
  },
];
</script>

<style scoped>
.box {
  margin: 20px;
}
.el-button--text {
  margin-right: 15px;
}
.el-select {
  width: 300px;
}
.el-input {
  width: 300px;
}
.dialog-footer button:first-child {
  margin-right: 10px;
}
.demo-datetime-picker {
  display: flex;
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
}
.demo-datetime-picker .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  flex: 1;
}
.demo-datetime-picker .block:last-child {
  border-right: none;
}
.demo-datetime-picker .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}
</style>
